<template>
  <div class="home-container">
    <el-card class="welcome-card">
      <div class="welcome-header">
        <h1 class="welcome-title">欢迎使用宠物交易平台 <span class="pet-icon">🐾</span></h1>
        <p class="welcome-subtitle">
          宠物交易平台！在这里，您可以轻松交易宠物、宠物用品和宠物食品，享受便捷的宠物生活服务。
          <span class="pet-icons">🐶🐱</span>
        </p>
      </div>

      <div class="intro-section">
        <div class="intro-item">
          <span class="emoji">😀</span>
          <p>
            作为用户，您可以通过注册登录账户，浏览宠物，查看最新公告，分享宠物养护攻略，
            探索宠物/用品列表，购买心仪商品，并管理您的个人主页。
          </p>
        </div>

        <div class="intro-item">
          <span class="emoji">💻</span>
          <p>
            作为管理者，我们提供了用户管理、公告管理、宠物攻略管理、商品类别管理以及社区帖子管理功能。
          </p>
        </div>

        <div class="intro-item">
          <span class="emoji">💻</span>
          <p>
            作为商家，我们提供了商品管理、订单管理、物流管理等功能。
          </p>
        </div>

        <div class="intro-item highlight">
          <span class="emoji">🏁</span>
          <p>
            无论您是宠物爱好者还是商家，宠物交易平台都致力于提供安全、专业的宠物交易服务，
            打造温暖的宠物社区。
          </p>
        </div>
      </div>

      <div class="feature-cards">
        <el-card class="feature-card pet-shop">
          <div class="card-content">
            <h3 class="card-title">⭐ 宠物商城</h3>
            <p class="card-desc">
              🍗 宠物狗、宠物猫，爬宠等应有尽有，满足您的需求。
            </p>
          </div>
        </el-card>

        <el-card class="feature-card pet-supplies">
          <div class="card-content">
            <h3 class="card-title">⭐ 精品宠物用品</h3>
            <p class="card-desc">
              🛏️ 智能喂食器、恒温猫窝、宠物定位器等高科技用品，学生专享优惠价，支持以旧换新。
            </p>
          </div>
        </el-card>

        <el-card class="feature-card pet-food">
          <div class="card-content">
            <h3 class="card-title">⭐ 宠物食品商城</h3>
            <p class="card-desc">
              🍗 进口主粮、定制鲜食、健康零食一应俱全。
            </p>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.welcome-card {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border: none;
  overflow: hidden;
  background: linear-gradient(135deg, #f9f9ff 0%, #f0f4ff 100%);
}

.welcome-header {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  margin: -20px -20px 20px -20px;
  border-radius: 16px 16px 0 0;
}

.welcome-title {
  font-size: 2.2rem;
  margin-bottom: 15px;
  font-weight: 700;
  .pet-icon {
    animation: bounce 2s infinite;
  }
}

.welcome-subtitle {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0.9;
  .pet-icons {
    display: inline-block;
    animation: float 3s ease-in-out infinite;
  }
}

.intro-section {
  padding: 0 20px;
  margin-bottom: 30px;
}

.intro-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  &.highlight {
    background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
    border-left: 4px solid #6a11cb;
  }
}

.emoji {
  font-size: 1.5rem;
  margin-right: 15px;
  flex-shrink: 0;
}

.feature-cards {
  display: flex;
  gap: 15px;
  padding: 0 10px;
  margin: 30px 0;
}

.feature-card {
  flex: 1;
  min-height: 220px;
  border-radius: 12px;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
  }

  &.pet-shop {
    &::before {
      background: linear-gradient(90deg, #FF9A9E 0%, #FAD0C4 100%);
    }
    background: linear-gradient(135deg, rgba(255, 154, 158, 0.1) 0%, rgba(250, 208, 196, 0.1) 100%);
  }

  &.pet-supplies {
    &::before {
      background: linear-gradient(90deg, #A1C4FD 0%, #C2E9FB 100%);
    }
    background: linear-gradient(135deg, rgba(161, 196, 253, 0.1) 0%, rgba(194, 233, 251, 0.1) 100%);
  }

  &.pet-food {
    &::before {
      background: linear-gradient(90deg, #84FAB0 0%, #8FD3F4 100%);
    }
    background: linear-gradient(135deg, rgba(132, 250, 176, 0.1) 0%, rgba(143, 211, 244, 0.1) 100%);
  }
}

.card-content {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #333;
}

.card-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}

@keyframes float {
  0% {transform: translateY(0px);}
  50% {transform: translateY(-5px);}
  100% {transform: translateY(0px);}
}

@media (max-width: 768px) {
  .feature-cards {
    flex-direction: column;
  }

  .welcome-title {
    font-size: 1.8rem;
  }

  .welcome-subtitle {
    font-size: 1rem;
  }
}
</style>
